<template>
  <div class="searchBox">
    <div class="location">
      <div class="myCity" @click="handlerCity">{{ cityStore.currentCity.cityName }}</div>
      <div class="myLocation" @click="positionClick">
        <span class="text">我的位置</span>
        <img src="@/assets/img/home/icon_location.png" alt="">
      </div>
    </div>
    <!-- 住店日期 -->
    <div class="searchBoxSection stayNights" @click="onClick">
      <div class="start">
        <div class="checkinText">入住</div>
        <div class="checkinDate">{{ checkinDate }}</div>
      </div>
      <div class="totalNights">共 {{ totalNights }} 晚</div>
      <div class="end">
        <div class="checkoutText">离店</div>
        <div class="checkoutDate">{{ checkoutDate }}</div>
      </div>
    </div>
    <!-- 日历 -->
    <van-calendar class="calendar" color="#ff9854" :round="false" :show-confirm="false" v-model:show="calendarShow"
      type="range" @confirm="onConfirm" />
    <!-- 价格人数 -->
    <div class="searchBoxSection pricePeople">
      <div class="prices">价格不限</div>
      <div class="people">人数不限</div>
    </div>
    <!-- 关键字 -->
    <div class="searchBoxSection keywords">
      <span>
        关键字/位置/民宿名
      </span>
    </div>
    <!-- 热门推荐 -->
    <div class="searchBoxSection hotSuggestions">
      <template v-for="(item, index) in hotSuggestions" :key="index">
        <div class="text">{{ item.tagText.text }}</div>
      </template>
    </div>
    <!-- 搜索按钮 -->
    <div class="searchBoxSection searchButton" @click="handlerClick">
      <span>开始搜索</span>
    </div>
  </div>
</template>

<script setup>
import useMainStore from "@/store/modules/main"
const mainStore = useMainStore()
import { useHomeStore } from "@/store/modules/home"
const homeStore = useHomeStore()
import { ref } from "vue";
import { getMMDD, getDays } from "@/utils/formatDate"
import { useRouter } from 'vue-router';
const router = useRouter()
import useCityStore from '@/store/modules/city';
const cityStore = useCityStore()
import { computed } from "vue";
import { storeToRefs } from "pinia";

// 搜索按钮
function handlerClick() {
  router.push({
    path: "search",
    query: {
      checkinDate: checkinDate.value,
      checkoutDate: checkoutDate.value,
      currentCity: cityStore.currentCity.cityName
    }
  })
}

// 热门推荐
const { hotSuggestions } = storeToRefs(homeStore)

// 日历
const totalNights = ref(1)

function onClick() {
  calendarShow.value = true
}
const calendarShow = ref(false);

const onConfirm = (values) => {
  const [start, end] = values
  mainStore.checkinDate = start
  mainStore.checkoutDate = end
  checkinDate = getMMDD(start)
  checkoutDate = getMMDD(end)
  totalNights.value = getDays(start, end)
  calendarShow.value = false
}

// 默认日期计算
const currentDate = new Date()
mainStore.checkinDate = currentDate
const currentDateTimeStamp = currentDate.getTime()
const nextDateTimeStamp = currentDateTimeStamp + (24 * 60 * 60 * 1000)
const nextDate = new Date(nextDateTimeStamp)
mainStore.checkoutDate = nextDate

let checkinDate = computed(() => getMMDD(currentDate))
let checkoutDate = computed(() => getMMDD(nextDate))

// 路由跳转
function handlerCity() {
  router.push("/city")
}

// 获取定位
function positionClick() {
  navigator.geolocation.getCurrentPosition(res => {
    console.log(res)
  }, err => {
    console.log(err)
  }, {
    enableHighAccuracy: true,
    timeout: 5000,
    maximumAge: 0
  })
}

</script>

<style lang="less" scoped>
.searchBox {
  --van-calendar-popup-height: 100%;
}

.location {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 11.73333vw;
  padding: 0 5.33333vw;
  border-bottom: 1px solid var(--line-color);

  .myCity {
    flex: 1;
    color: #333;
    font-size: 4vw;
  }

  .myLocation {

    .text {
      line-height: 24px;
      color: #666;
      font-size: 3.2vw;
    }

    img {
      width: 4.8vw;
      height: 4.8vw;
      margin: 0 4px;

    }
  }

}

.searchBoxSection {
  display: flex;
  padding: 0 5.33333vw;
  height: 11.73333vw;
  align-items: center;
  border-bottom: 1px solid var(--line-color);


  .start {
    flex: 1;

    .checkinText {
      color: gray;
      margin-bottom: 4px;
      font-size: 3.2vw;
      color: #999;
    }

    .checkinDate {
      color: #333;
      font-size: 4vw;
      font-weight: 500;
    }
  }

  .totalNights {
    flex: 2;
    text-align: center;
    // background-color: red;
  }

  .totalNights {
    font-size: 3.2vw;
    color: #666;
  }

  .end {
    flex: 1;
    // background-color: blue;

    .checkoutText {
      margin-bottom: 4px;
      font-size: 3.2vw;
      color: #999;
    }

    .checkoutDate {
      color: #333;
      font-size: 4vw;
      font-weight: 500;
    }
  }
}

.pricePeople {
  color: #999999;
  font-size: 3.73333vw;
  height: 11.73333vw;

  .prices {
    flex: 2;
    height: 11.73333vw;
    line-height: 11.73333vw;
    border-right: 1px solid var(--line-color);
  }

  .people {
    margin-left: 10px;
    flex: 1;
  }
}

.keywords {
  color: #999999;
  font-size: 3.73333vw;
}

.hotSuggestions {
  margin: 10px 0;
  border-bottom: 0px;
  height: auto;
  flex-wrap: wrap;

  .text {
    color: rgb(63, 73, 84);
    background: rgb(241, 243, 245);
    padding: 1.06667vw 2.13333vw;
    margin: 1.06667vw;
    border-radius: 3.73333vw;
    font-size: 3.2vw;
    line-height: 1;
  }
}

.searchButton {
  margin: 15px 5.33333vw 0px;
  background-color: red;
  height: 10.13333vw;
  max-height: 13.33333vw;
  font-weight: 500;
  font-size: 4.8vw;
  line-height: 10.13333vw;
  text-align: center;
  border-radius: 5.33333vw;
  color: #fff;
  background-image: var(--theme-linear-gradient);

  span {
    flex: 1;
  }
}
</style>
